import { Link } from 'react-router-dom';
import { Table, Button, Select, Tabs, DatePicker, Form } from 'antd';
import project from './project';
import { PropertySafetyFilled } from '@ant-design/icons';
import style from './index.less';
import { history } from '@/.umi/core/history';
import React, { useState } from 'react';
import request from '@/http';
import All_style from '../../index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    title: '日期',
    dataIndex: 'data',
    key: 'data',
  },
  {
    title: '学号',
    dataIndex: 'stu_id',
    key: 'stu_id',
  },
  {
    title: '姓名',
    dataIndex: 'stu_name',
    key: 'stu_name',
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'peojectName',
  },
  {
    title: '实训老师',
    dataIndex: 'projectTeacher',
    key: 'projectTeacher',
  },
  {
    title: '责任老师',
    dataIndex: 'Teacher',
    key: 'Teacher',
  },
  {
    title: '考勤情况',
    dataIndex: 'checkWork',
    key: 'checkWork',
  },
  {
    title: '应签到',
    dataIndex: 'arCheckIn',
    key: 'arCheckIn',
  },
  {
    title: '实签到',
    dataIndex: 'arAcheckIn',
    key: 'arAcheckIn',
  },
  {
    title: '应签退',
    dataIndex: 'arCheckOut',
    key: 'arCheckOut',
  },
  {
    title: '实签退',
    dataIndex: 'arAcheckOut',
    key: 'arAcheckOut',
  },
  {
    title: '操作',
    key: 'action',
    render: (row: any) => (
      <>
        {row.checkWork === '正常' ? (
          <></>
        ) : (
          <>
            <Button
              type="link"
              onClick={() => {
                history.push(`/Student/LeaveManagement/addLeave?id=${row?.id}`);
              }}
            >
              请假申请
            </Button>
          </>
        )}
      </>
    ),
  },
];
const dataOld = [
  {
    key: '1',
    data: '2021-6-8',
    stu_id: '189000547',
    stu_name: '姜楠',
    projectName: '专周实训',
    projectTeacher: '刘阳',
    Teacher: '刘胜会',
    checkWork: '正常',
    arCheckIn: '09:00:00',
    arAcheckIn: '09:00:00',
    arCheckOut: '18:00:00',
    arAcheckOut: '18:00:00',
    // action: '请假申请',
  },
];

const Project = (props: any) => {
  const cl = () => {};
  const [formObject] = Form.useForm();
  const sd = async () => {
    const sd: any = await request.put('/attendance_manage/ask/st_attend');
    console.log(sd.data);
  };
  const [courseName, setCourseName] = React.useState([]);
  const getCourseName = async () => {
    const CourseName: any = await request.put(
      '/user_info_manage/getCourseName',
    );
    setCourseName(CourseName.data);
  };

  const [arAttendance, setArAttendance] = React.useState([]);
  const getArAttendance = async () => {
    const ArAttendance: any = await request.put(
      '/user_info_manage/getArAttendance',
    );
    setArAttendance(ArAttendance.data);
  };

  const [data, setData] = React.useState(dataOld);

  interface pay {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page, pageSize) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pay>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });
  const loadData = async (current, pageSize) => {
    const datas = await formObject.validateFields();
    const result: any = await request.post(
      '/atendance_manage_moude/xues/QueryAttendanceRecord',
      {
        page: current,
        number: pageSize,
        // accountNumber: 111,
        ...datas,
        ear_checkdate: datas?.vacationSubmitDate
          ? datas?.vacationSubmitDate[1]?.format('YYYY-MM-DD HH:mm:ss')
          : '',
        bar_checkdate: datas?.vacationSubmitDate
          ? datas?.vacationSubmitDate[0]?.format('YYYY-MM-DD HH:mm:ss')
          : '',
      },
    );
    console.log(result.data);
    if (result.success) {
      const newData = result.data.returnDate.map((d, index) => {
        console.log(d.arAttendance);
        return {
          id: d.id,
          key: `k_${index}`,
          data: d.arCheckDate,
          stu_id: d.studentNo,
          stu_name: d.studentName,
          projectName: d.courseName,
          projectTeacher: d.trainingTeacher,
          Teacher: d.responseTeacher,
          checkWork: d.arAttendance,
          arCheckIn: d.arCheckIn,
          arAcheckIn: d.arAcheckIn,
          arCheckOut: d.arCheckOut,
          arAcheckOut: d.arAcheckOut,
        };
      });

      setData(newData);
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
    }
  };
  const onReset = () => {
    formObject.resetFields();
    loadData(pageInfo.current, pageInfo.pageSize);
  };
  React.useEffect(() => {
    loadData(pageInfo.current, pageInfo.pageSize);
    getCourseName();
    getArAttendance();
  }, []);

  return (
    <div className={All_style.box}>
      <Form name="SelectprosonForm" form={formObject} preserve={false}>
        <div>
          {/* <Form.Item
            name="vacationSubmitDate"
            label="申请提交日期："
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <RangePicker showTime className={All_style.select} />
          </Form.Item> */}
          <Form.Item
            name="vacationSubmitDate"
            label="申请提交日期："
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <RangePicker showTime className={All_style.select} />
          </Form.Item>

          <Form.Item
            name="courseName"
            label="项目名称："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select defaultValue="请选择" className={All_style.select}>
              {courseName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            name="arAttendance"
            label="考勤情况："
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select defaultValue="请选择" className={All_style.select}>
              {arAttendance.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <div style={{ clear: 'both', float: 'right', marginRight: 80 }}>
            <Button
              className={All_style.button}
              onClick={() => loadData(pageInfo.current, pageInfo.pageSize)}
            >
              查询
            </Button>
            <Button className={All_style.button2} onClick={onReset}>
              重置
            </Button>
          </div>
        </div>
      </Form>
      <Table
        columns={columns}
        dataSource={data}
        className={All_style.table}
        pagination={pageInfo}
      />
    </div>
  );
};
export default Project;
